import React, { Component } from "react";
import { Form, Input, Button, Checkbox, Select, Col, Radio } from "antd";
import { http } from "../../../api";
const { Option } = Select;
const { TextArea } = Input;
export default class ChoosePub extends Component {
  state = { majorlist: [] };
  componentDidMount() {
    http.categorylist().then((res) => {
      if (res.data.code == 200) {
        var list = [];
        res.data.val.map((item) => {
          list.push(item.code);
          this.setState({
            majorlist: list,
          });
        });
      }
    });
  }

  render() {
    const value = "";

    // const choosesRoleList = [] //题目权限
    const layout = {
      wrapperCol: {
        span: 16,
      },
    };
    const tailLayout = {
      wrapperCol: {
        span: 16,
      },
    };
    const onFinish = (values) => {
      console.log(values);
      var answer = [];
      for (var i = 1; i <= 4; i++) {
        var temp = "answer" + i;
        answer.push(values[temp]);
      }
      // console.log(answer, values.code, values.many, values.subject, values.correct, values.choosesRole, values.technology);
      http
        .addchoose({
          answer: answer,
          code: values.code,
          many: values.many,
          subject: values.subject,
          correct: values.correct,
          choosesRole: values.choosesRole,
          technology: values.technology,
        })
        .then((res) => {
          // console.log(res);
        });
    };

    const handleChange = () => {
      //   console.log(1);
    };

    const onFinishFailed = (errorInfo) => {
      console.log("Failed:", errorInfo);
    };
    const qery = (i) => {};
    return (
      <div style={{ overflowY: "auto" }}>
        <Form
          {...layout}
          name="basic"
          initialValues={{ choosesRole: 0, code: "请选择", many: "false" }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          layout="vertical"
        >
          <Form.Item
            label="专业类型"
            name="code"
            rules={[
              {
                required: true,
                message: "请选择专业类型",
              },
            ]}
          >
            <Select style={{ width: 120 }} onChange={this.handleChange}>
              {this.state.majorlist &&
                this.state.majorlist.map((item, i) => (
                  <Option value={item} key={i}>
                    {" "}
                    {item}
                  </Option>
                ))}
            </Select>
          </Form.Item>

          <Form.Item label="题目种类" name="many">
            <Radio.Group size="large">
              <Radio.Button value="false" style={{ marginRight: 10 }}>
                单选
              </Radio.Button>
              <Radio.Button value="true">多选</Radio.Button>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="相关技术描述" name="technology">
            <Input />
          </Form.Item>
          <Form.Item
            label="面试题目"
            name="subject"
            rules={[
              {
                required: true,
                message: "请输入面试题目",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="题目答案"
            name="answer1"
            rules={[
              {
                required: true,
                message: "请输入题目答案",
              },
            ]}
          >
            <Input placeholder="A选项" />
            {/* <TextArea
            value={this.value}
            onChange={this.onChange}
            placeholder="请输入全部的答案，以';'分隔"
            autoSize={{ minRows: 3, maxRows: 5 }}
          /> */}
          </Form.Item>
          <Form.Item
            name="answer2"
            rules={[
              {
                required: true,
                message: "请输入题目答案",
              },
            ]}
          >
            <Input placeholder="B选项" />
          </Form.Item>
          <Form.Item
            name="answer3"
            rules={[
              {
                required: true,
                message: "请输入题目答案",
              },
            ]}
          >
            <Input placeholder="C选项" />
          </Form.Item>
          <Form.Item
            name="answer4"
            rules={[
              {
                required: true,
                message: "请输入题目答案",
              },
            ]}
          >
            <Input placeholder="D选项" />
          </Form.Item>

          <Form.Item
            label="正确答案"
            name="correct"
            rules={[
              {
                required: true,
                message: "请输入正确答案",
              },
            ]}
          >
            <Input placeholder="输入正确选项" />
            {/* <TextArea
            value={this.value}
            onChange={this.onChange}
            placeholder="请输入正确的答案，以';'分隔"
            autoSize={{ minRows: 3, maxRows: 5 }}
          /> */}
          </Form.Item>
          <Form.Item
            label="题目权限"
            name="choosesRole"
            rules={[
              {
                required: true,
                message: "请选择可查看权限",
              },
            ]}
          >
            <Select style={{ width: 120 }} onChange={this.handleChange}>
              <Option value={0}> 免费</Option>
              <Option value={1}> 会员可看</Option>
            </Select>
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}
